<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Title -->
    <title>KELION</title>
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<!-- Menu -->
<!-- Navigation -->
<nav class="navbar">
    <div class="container-fluid">
        <a class="home-link" href="">Home</a>
        <a class="archives-link" href="pages/contact.html">Contact</a>
        <a class="archives-link" href="pages/about.html">About</a>
        <a class="archives-link" href="pages/tags.html">Tags</a>
        <div class=" toggle-hide mobile-inner-header-icon mobile-inner-header-icon-out">
            <span></span><span></span>
        </div>
    </div>
    <div class="mobile-inner-nav" role="navigation">
        <a href="pages/tags.html" style="animation-delay: 0.1s;">Tags</a>
        <a href="pages/about.html" style="animation-delay: 0.2s;">About</a>
        <a href="pages/contact.html" style="animation-delay: 0.3s;">Contact</a>
    </div>
</nav>

<!-- Main Content -->
<!-- Page Header -->
<!-- Set your background image for this header in the theme's configuration: index_cover -->
<header class="intro-header">
    <div class="container">
        <div class="row">
            <div class="">
                <div class="site-heading">
                    <h1 class="user-name">KELION</h1>
                    <hr class="small">
                    <span class="subheading">说不出口的废猫</span>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Main Content -->
<div class="container">
    <div class="row">
        <div id="timeline-content">	
            <!-- 内容区 -->
        </div>
        <p class="pager">
            <span id="next">加载更多</span>
        </p>
    </div>
</div>


<!-- Footer -->
<hr/>

<footer>
    <div class="">
    </div>
</footer>


<!-- jQuery -->
<script src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        function toggleNavClass() {
            $(this).toggleClass("mobile-inner-header-icon-click mobile-inner-header-icon-out");
            $(".mobile-inner-nav").slideToggle(250);
        }
        var headerIcon = document.getElementsByClassName("mobile-inner-header-icon")[0];
        headerIcon.addEventListener("click", toggleNavClass, false);

        $(".mobile-inner-nav a").each(function (index) {
            $(this).css({'animation-delay': (index / 10) + 's'});
        });
    });
    
    
    $(document).ready(function(){
    	var count = 1;
    	var getMoreBtn = document.getElementById("next");
    	function getMoreInfo(){
    		$.ajax({
    			url : "getList.do",
    			type : "GET",
    			data : {
    				"startNum" : 10*(count-1),
    				"counted" : 10
    			},
    			dataType : "json",
    			success : function(msg) {
    				console.log(msg);
    				var list = '';
    				var length = msg["articles"].length;
    				
    				if(!length){
    					getMoreBtn.innerHTML = "已经到底了   !!!";	
    					return;
    				}else if(length<10){
    					getMoreBtn.innerHTML = "已经到底了   !!!";
    				}
    				
    				console.log(length);
    				var art = msg["articles"];
    				console.log(art[0].title);

    				for (var i = 0; i < length; ++i) {
    					var item = "<div class='post-preview'><a href='pages/article.html?id="
    							+ art[i].id
    							+ "'><h2 class='post-title'>"
    							+ art[i].title
    							+ "</h2></a>"
    							+ "<p class='post-meta'>"
    							+art[i].publish_time
    							+"&nbsp;&nbsp;&nbsp;&nbsp"
    							+"<a class='button' href='pages/category.html?category="+art[i].category+"'>"
    							+art[i].category
    							+"</a></p></div><hr>";
    					list += item;
    					console.log(list);
    				}
    				$("#timeline-content").append(list);
    			},
    			error : function(er) {
    				console.log(er);
    			}
    		});
    		++count;
    	}
    	getMoreInfo();
    	getMoreBtn.addEventListener("click",getMoreInfo,false);
    })
    
</script>

</body>

</html>